{% load static %}
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>
        {% block page_title %}{% endblock %}
    </title>
    <meta name="keywords" content="DeathGhost">
    <meta name="description" content="DeathGhost">
    <link rel="icon" href="{% static 'favicon.ico' %}" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
    <script src="{% static 'js/html5.js' %}"></script>
    <script src="{% static 'js/jquery.js' %}"></script>
    {% block head %}{% endblock %}
    <script>
        $(function () {
            {#  显示分类导航 #}
            {#  比较运算符前后要添加空格           #}
            {% if request.path == '/' %}
                $("nav .indexAsideNav").show();
            {% endif %}

            $("nav .category").mouseover(function () {
                $(".asideNav").slideDown();
            });
            $("nav .asideNav").mouseleave(function () {
                $(".asideNav").slideUp();
            });
        });
    </script>
</head>

<body>
<!--header-->
<header>
    <!--topNavBg-->
    <div class="topNavBg">
        <div class="wrap">
            <!--topLeftNav-->
            <ul class="topLtNav">
                <li><a href="{% url 'login' %}" class="obviousText">亲，请登录</a></li>
                <li><a href="{% url 'reg' %}">注册</a></li>
                <li><a href="#">移动端</a></li>
            </ul>
            <!--topRightNav-->
            <ul class="topRtNav">
                <li><a href="{% url 'ucenter' %}">个人中心</a></li>
                <li><a href="{% url 'cart' %}" class="cartIcon">购物车<i>0</i></a></li>
                <li><a href="#" class="favorIcon">收藏夹</a></li>
                <li><a href="#">商家中心</a></li>
                <li><a href="#" class="srvIcon">客户服务</a></li>
                <li><a href="#">联盟管理</a></li>
            </ul>
        </div>
    </div>
    <!--logoArea-->
    <div class="wrap logoSearch">
        <!--logo-->
        <div class="logo">
            <h1 onclick="location.href='{% url "index" %}'"><img src="{% static 'imgs/logo.png' %}"></h1>
        </div>
        <!--search-->
        <div class="search">
            <ul class="switchNav">
                <li class="active" id="chanpin">产品</li>
                <li id="shangjia">商家</li>
                <li id="zixun">搭配</li>
                <li id="wenku">文库</li>
            </ul>
            <div class="searchBox">
                <form>
                    <div class="inputWrap">
                        <input type="text" placeholder="输入产品关键词或货号">
                    </div>
                    <div class="btnWrap">
                        <input type="submit" value="搜索">
                    </div>
                </form>
                <a href="#"
                   class="advancedSearch">高级搜索</a>
            </div>
        </div>
    </div>
    <!--nav-->
    <nav>
        <ul class="wrap navList">
            <li class="category">
                <a>全部产品分类</a>
                <dl class="asideNav indexAsideNav" style="display: none;">
                    <dt><a href="https://show.17sucai.com/preview/183822/2019-05-11/shopping/channel.html">女装</a>
                    </dt>
                    <dd>
                        <a href="#">夏装新</a>
                        <a href="#">连衣裙</a>
                        <a href="#">T恤</a>
                        <a href="#">衬衫</a>
                        <a href="#">裤子</a>
                        <a href="#">牛仔裤</a>
                        <a href="#">背带裤</a>
                        <a href="#">短外套</a>
                        <a href="#">时尚外套</a>
                        <a href="#">风衣</a>
                        <a href="#">毛衣</a>
                        <a href="#">背心</a>
                        <a href="#">吊带</a>
                        <a href="#">民族服装</a>
                    </dd>
                    <dt><a href="https://show.17sucai.com/preview/183822/2019-05-11/shopping/channel.html">男装</a>
                    </dt>
                    <dd>
                        <a href="#">衬衫</a>
                        <a href="#">背心</a>
                        <a href="#">西装</a>
                        <a href="#">POLO衫</a>
                        <a href="#">马夹</a>
                        <a href="#">皮衣</a>
                        <a href="#">毛衣</a>
                        <a href="#">针织衫</a>
                        <a href="#">牛仔裤</a>
                        <a href="#">外套</a>
                        <a href="#">夹克</a>
                        <a href="#">卫衣</a>
                        <a href="#">风衣</a>
                        <a href="#">民族风</a>
                        <a href="#">原创设计</a>
                        <a href="#">大码</a>
                        <a href="#">情侣装</a>
                        <a href="#">开衫</a>
                        <a href="#">运动裤</a>
                        <a href="#">工装裤</a>
                    </dd>
                </dl>
            </li>
            <li>
                <a href="{% url 'index' %}"
                   class="active">首页</a>
            </li>
            <li>
                <a href="#">时尚搭配</a>
            </li>
            <li>
                <a href="#">原创设计</a>
            </li>
            <li>
                <a href="#">时尚代购</a>
            </li>
            <li>
                <a href="#">民族风</a>
            </li>
            <li>
                <a href="#">时尚搭配</a>
            </li>
            <li>
                <a href="#">搭配知识</a>
            </li>
            <li>
                <a href="#">促销专区</a>
            </li>
            <li>
                <a href="#">其他</a>
            </li>
        </ul>
    </nav>

</header>
<script>
    $(function () {
        //测试效果，程序对接如需变动重新编辑
        $(".switchNav li").click(function () {
            $(this).addClass("active").siblings().removeClass("active");
        });
        $("#chanpin").click(function () {
            $(".inputWrap input[type='text']").attr("placeholder", "输入产品关键词或货号");
        });
        $("#shangjia").click(function () {
            $(".inputWrap input[type='text']").attr("placeholder", "输入商家店铺名");
        });
        $("#zixun").click(function () {
            $(".inputWrap input[type='text']").attr("placeholder", "输入关键词查找文章内容");
        });
        $("#wenku").click(function () {
            $(".inputWrap input[type='text']").attr("placeholder", "输入关键词查找文库内容");
        });
    });

</script>

{#  主体内容部分   #}
{% block body %}{% endblock %}


<!--footer-->
<footer>
    <!--help-->
    <ul class="wrap help">
        <li>
            <dl>
                <dt>消费者保障</dt>
                <dd><a href="https://show.17sucai.com/preview/183822/2019-05-11/shopping/article_read.html">保障范围</a>
                </dd>
                <dd><a
                        href="https://show.17sucai.com/preview/183822/2019-05-11/shopping/article_read.html">退换货流程</a>
                </dd>
                <dd><a href="https://show.17sucai.com/preview/183822/2019-05-11/shopping/article_read.html">服务中心</a>
                </dd>
                <dd><a
                        href="https://show.17sucai.com/preview/183822/2019-05-11/shopping/article_read.html">更多服务特色</a>
                </dd>
            </dl>
        </li>
        <li>
            <dl>
                <dt>新手上路</dt>
                <dd><a href="https://show.17sucai.com/preview/183822/2019-05-11/shopping/article_read.html">保障范围</a>
                </dd>
                <dd><a
                        href="https://show.17sucai.com/preview/183822/2019-05-11/shopping/article_read.html">退换货流程</a>
                </dd>
                <dd><a href="https://show.17sucai.com/preview/183822/2019-05-11/shopping/article_read.html">服务中心</a>
                </dd>
                <dd><a
                        href="https://show.17sucai.com/preview/183822/2019-05-11/shopping/article_read.html">更多服务特色</a>
                </dd>
            </dl>
        </li>
        <li>
            <dl>
                <dt>付款方式</dt>
                <dd><a href="https://show.17sucai.com/preview/183822/2019-05-11/shopping/article_read.html">保障范围</a>
                </dd>
                <dd><a
                        href="https://show.17sucai.com/preview/183822/2019-05-11/shopping/article_read.html">退换货流程</a>
                </dd>
                <dd><a href="https://show.17sucai.com/preview/183822/2019-05-11/shopping/article_read.html">服务中心</a>
                </dd>
                <dd><a
                        href="https://show.17sucai.com/preview/183822/2019-05-11/shopping/article_read.html">更多服务特色</a>
                </dd>
            </dl>
        </li>
        <li>
            <dl>
                <dt>服务保障</dt>
                <dd><a href="https://show.17sucai.com/preview/183822/2019-05-11/shopping/article_read.html">保障范围</a>
                </dd>
                <dd><a
                        href="https://show.17sucai.com/preview/183822/2019-05-11/shopping/article_read.html">退换货流程</a>
                </dd>
                <dd><a href="https://show.17sucai.com/preview/183822/2019-05-11/shopping/article_read.html">服务中心</a>
                </dd>
                <dd><a
                        href="https://show.17sucai.com/preview/183822/2019-05-11/shopping/article_read.html">更多服务特色</a>
                </dd>
            </dl>
        </li>
    </ul>


    <dl class="wrap otherLink">
        <dt>友情链接</dt>
        <dd><a href="http://www.17sucai.com/" target="_blank">17素材</a></dd>
        <dd><a href="http://www.17sucai.com/pins/24448.html">HTML5模块化后台管理模板</a></dd>
        <dd><a href="http://www.17sucai.com/pins/15966.html">绿色清爽后台管理系统模板</a></dd>
        <dd><a href="http://www.17sucai.com/pins/14931.html">黑色的cms商城网站后台管理模板</a></dd>
        <dd><a href="http://www.deathghost.cn/" target="_blank">前端博客</a></dd>
        <dd><a href="http://www.deathghost.cn/" target="_blank">博客</a></dd>
        <dd><a href="http://www.deathghost.cn/" target="_blank">新码笔记</a></dd>
        <dd><a href="http://www.deathghost.cn/" target="_blank">DethGhost</a></dd>
        <dd><a href="#">当当</a></dd>
        <dd><a href="#">优酷</a></dd>
        <dd><a href="#">土豆</a></dd>
        <dd><a href="#">新浪</a></dd>
        <dd><a href="#">钉钉</a></dd>
        <dd><a href="#">支付宝</a></dd>
    </dl>
    <div class="wrap btmInfor">
        <p>© 2013 DeathGhost.cn 版权所有 网络文化经营许可证：浙网文[2013]***-027号 增值电信业务经营许可证：浙B2-200***24-1
            信息网络传播视听节目许可证：1109***4号
        </p>
        <address>联系地址：陕西省西安市雁塔区XXX号</address>
    </div>
</footer>


</body>

</html>